<template>
  <div class="myMenu">
    <div class="logoBox">
      <img @click="$router.push('/home')" src="../../assets/img/智慧通logo.png" alt="" />
    </div>
    <el-menu
      style="width: 240px; background-color: #f9fbfc; border-right: 0; box-sizing: border-box"
      default-active="/production"
      class="el-menu-vertical-demo"
      router
      unique-opened="true"
    >
      <div v-for="(item, index) in props.nav">
        <el-sub-menu
          v-if="item.children"
          :index="item.path"
          :popper-class="{ active: props.nav[index].path === item.path }"
        >
          <template #title>
            <span
              style="margin-left: 20px; margin-right: 10px"
              :class="'iconfont icon-' + item.icon"
            ></span>
            <span>{{ item.text }}</span>
          </template>
          <el-menu-item
            v-for="(children, childrenIndex) in item.children"
            :class="{ active: props.nav[index]!.children[childrenIndex].path === children.path }"
            :index="item.path + children.path"
          >
            <span
              style="margin-left: 20px; margin-right: 10px"
              :class="'iconfont icon-' + children.icon"
            ></span>
            <span>{{ children.text }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path">
          <span
            style="margin-left: 20px; margin-right: 10px"
            :class="'iconfont icon-' + item.icon"
          ></span>
          <span>{{ item.text }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
  <!-- <div class="zhanwei"></div> -->
</template>

<script lang="ts" setup>
import type { NavList } from '@/types/home'
import { useRoute } from 'vue-router'

const props = withDefaults(
  defineProps<{
    nav: NavList
  }>(),
  {},
)
</script>

<style lang="scss">
.myMenu {
  box-sizing: border-box;
  background-color: #f9fbfc;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e0e1f2;
  position: fixed;
  // width: 240px;
  min-height: 100vh;

  .active {
    color: $primary-color;
  }

  .el-menu {
    background-color: $primary-nav-background-color;
  }

  .el-sub-menu.is-active {
    color: $primary-gray-text-color;
  }

  .el-menu-item {
    color: $primary-gray-text-color;
  }

  //设置当前被选中的一级菜单
  .el-menu-item.is-active {
    border: 0;
    background-color: $primary-background-color;
    color: $primary-color;
    border-radius: 5px;
    font-weight: bold;
  }

  .logoBox {
    width: 240px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    // border-bottom: 1px solid $primary-border-color;

    img {
      width: 100%;
      height: fit-content;
    }
  }
}

.zhanwei {
  width: 240px;
  height: 100%;
}
</style>
